<template>
  <div class="bigData">
    <div class="topTitle">
      <div class="topname">
        <b>物资数据详情信息</b>
      </div>
      <screenfull id="screenfull" style="color: #FFFFFF;float: right;margin-right: 95px" class="right-menu-item hover-effect" />
    </div>
<!--    轮播图-->
    <div class="lunnei">
      <el-carousel :interval="4000" type="card" height="265px">
        <el-carousel-item v-for="item in lunboData" :key="">
          <div class="lunneidiv">
            <div class="lunnei">
              <div class="kuangdiv-Left">
                <div class="kuang-top"><b>{{item.depName}}</b> </div>
                <div class="kuang-bottom">
                  <div class="kuangleft">
                    <pie-chart :pieData="item.percentage"></pie-chart>
                  </div>
                  <div class="kuangright">
                    <div class="title" style="margin-top: 10px">月度预算</div>
                    <div class="titleshu">
                      <b>{{item.mouthSun}}</b>
                    </div>
                    <div class="title">月度消耗</div>
                    <div class="titleshu">
                      <b> {{item.total}}</b>
                    </div>
                    <div class="title">消耗占比</div>
                    <div class="titleshu">
                      <b> {{item.percentage}}%</b>
                    </div>
                  </div>
                </div>

              </div>
              <div class="shuxian"></div>
              <div class="kuangdiv-Right" >
                <chuzhang-Chart  style="margin-top:10px;margin-left: 10px" :chuzhang="item.map"></chuzhang-Chart>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="yuename">
      <b>月度计划分析</b>
      <el-date-picker
        v-model="timedata"
        type="month"
        style="float:right;;width: 200px"
        value-format="yyyy-MM"
        @change="yuefenchaxun"
        placeholder="选择月">
      </el-date-picker>
      <el-select @change="jhfxBtnwz(depid)" v-model="depid" placeholder="请选择"  style="float:left;width: 200px">
        <el-option
          v-for="item in wzbingzhuang"
          :key="item.depId"
          :label="item.depName"
          :value="item.depId">
        </el-option>
      </el-select>
    </div>
<!--    需求分析-->
    <div class="xuqiu">
      <div class="xuqiu-left">
        <div class="xuqiu-top">需求计划分析</div>
        <div class="xuqiu-botm">

          <binhtwo-Chart :bingzhuang="bingzhuang"></binhtwo-Chart>

        </div>
      </div>
      <div class="xuqiu-cent"  @mouseover="mouseOver"  @mouseleave="mouseLeave" >

        <table >
          <thead>
            <tr class="top">
              <td>战线名称</td>
              <td>月预算</td>
              <td>月计划</td>
              <td>上月计划</td>
              <td>年计划</td>
              <td>上年当月计划</td>
            </tr>
          </thead>
          <tr :class="item.style"  v-for="item in bingzhuangding">
            <td>{{item.depName}}</td>
            <td>{{item.mouthSun}}</td>
            <td>{{item.totalSun}}</td>
            <td>{{item.totalSunLastMouth}}</td>
            <td>{{item.totalSunYear}}</td>
            <td>{{item.totalSunLastYearMouth}}</td>
          </tr>
        </table>

<!--        <ul id="comment1"   >-->
<!--          <li class="comli">-->
<!--            <span class="zhanxian">战线名称</span>-->
<!--            <span class="dyys">月预算</span>-->
<!--            <span class="dyxh">月计划</span>-->
<!--            <span class="dyye">上月计划</span>-->
<!--            <span class="yslj">年累积</span>-->
<!--            <span class="xhlj">上年当月计划</span>-->
<!--          </li>-->

<!--          <div class="fujiys">-->
<!--            <div>-->
<!--              <li :class="item.style"  v-for="item in bingzhuangding">-->
<!--                <span class="zhanxian">{{item.depName}}</span>-->
<!--                <span class="dyys">{{item.mouthSun}}</span>-->
<!--                <span class="dyxh">{{item.totalSun}}</span>-->
<!--                <span class="dyye">{{item.totalSunLastMouth}}</span>-->
<!--                <span class="yslj">{{item.totalSunYear}}</span>-->
<!--                <span class="xhlj">{{item.totalSunLastYearMouth}}</span>-->
<!--              </li>-->
<!--            </div>-->

<!--          </div>-->


<!--        </ul>-->


      </div>
      <div class="xuqiu-right">
        <div class="xuqiu-top">
          需求计划对比
        </div>
        <div class="xuqiu-tbom">
          <zhuzhuang-Chart :disanData="chuzhangData"></zhuzhuang-Chart>
        </div>

      </div>
    </div>
<!--    第三部分-->
    <div class="bottom">
      <div class="bottom-left">
        <zhuzhuang-Charts :disanData="disanDatasan"></zhuzhuang-Charts>
      </div>
      <div class="bottom-zhong"  @mouseover="mouseOverb"  @mouseleave="mouseLeaveb">
        <table   >
          <thead>
          <tr class="top">
            <td>区队名称</td>
            <td>月计划</td>
            <td>上月计划</td>
            <td>年累积</td>
          </tr>
          </thead>
          <tr :class="item.style"  v-for="item in zxnameArrsan">
            <td>{{item.depName}}</td>
            <td>{{item.lastTotalSun}}</td>
            <td>{{item.totalSun}}</td>
            <td>{{item.totalSunYear}}</td>
          </tr>
        </table>
      </div>
<!--      <div class="bottom-right">-->
<!--        <div class="neirong">-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              当月申请数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrright.applyCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              上月申请数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrright.lastApplyCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              申请数量比例-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrright.applyCountPro}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              当月申请物资数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrright.suppliesCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              上月申请物资数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrright.lastSuppliesCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              申请物资比例-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrright.suppliesCountPro}}</div>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
    </div>

    <div class="yuename"> <b>月度消耗分析</b> </div>
    <!--    物资出库分析-->
    <div class="xuqiu">
      <div class="xuqiu-left">
        <div class="xuqiu-top">物资出库分析</div>
        <div class="xuqiu-botm">

          <binhtwo-Chartb :bingzhuang="wzbingzhuang"></binhtwo-Chartb>

        </div>
      </div>
      <div class="xuqiu-cent" @mouseover="mouseOverc"  @mouseleave="mouseLeavec">
        <table >
          <thead>
          <tr class="top">
            <td>战线名称</td>
            <td>月消耗（万元）</td>
            <td>上月消耗（万元）</td>
            <td>年消耗（万元）</td>
            <td>上年当月消耗（万元）</td>
          </tr>
          </thead>
          <tr :class="item.style" v-for="item in bingzhuangdingWZ">
            <td>{{item.depName}}</td>
            <td>{{item.totalSun}}</td>
            <td>{{item.totalSunLastMouth}}</td>
            <td>{{item.totalSunYear}}</td>
            <td>{{item.totalSunLastYearMouth}}</td>
          </tr>
        </table>
      </div>
      <div class="xuqiu-right">
        <div class="xuqiu-top">
          物资出账对比
        </div>
        <div class="xuqiu-tbom">
          <zhuzhuang-Chartwz :disanData="chuzhangDataWZ"></zhuzhuang-Chartwz>
        </div>

      </div>
    </div>
    <!--    第三部分-->
    <div class="bottom">
      <div class="bottom-left">
        <zhuzhuangxh-Chart :disanData="disanDatasanwz"></zhuzhuangxh-Chart>
      </div>
      <div class="bottom-zhong" @mouseover="mouseOverd"  @mouseleave="mouseLeaved">
        <table >
          <thead>
          <tr class="top">
            <td>项目费用</td>
            <td>月消耗（万元）</td>
            <td>上月消耗（万元）</td>
            <td>年消耗（万元）</td>
          </tr>
          </thead>
          <tr :class="item.style"  v-for="item in zxnameArrsanwz">
            <td>{{item.depName}}</td>
            <td>{{item.lastTotalSun}}</td>
            <td>{{item.totalSun}}</td>
            <td>{{item.totalSunYear}}</td>
          </tr>
        </table>
      </div>
<!--      <div class="bottom-right">-->
<!--        <div class="neirong">-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              当月申请数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrrightwz.applyCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              上月申请数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrrightwz.lastApplyCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              申请数量比例-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrrightwz.applyCountPro}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              当月申请物资数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrrightwz.suppliesCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              上月申请物资数量-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrrightwz.lastSuppliesCount}}</div>-->
<!--          </div>-->
<!--          <div class="neirong-body">-->
<!--            <div class="neirong-sq">-->
<!--              申请物资比例-->
<!--            </div>-->
<!--            <div class="neirong-sl">{{arrrightwz.suppliesCountPro}}</div>-->
<!--          </div>-->
<!--        </div>-->

<!--      </div>-->
    </div>

  </div>
</template>

<script>
  import request from '@/utils/request'
  import Screenfull from '@/components/Screenfull'
  import PieChart from './kuangChart'
  import chuzhangChart from './chuzhangChart'
  import bingzhuangChart from './bingzhuangChart'
  import binhtwoChart from './binhtwochart'
  import binhtwoChartb from './binhtwochartb'
  import zhuzhuangChart from './zhuzhuangChart'
  import zhuzhuangChartwz from './zhuzhuangChartWZ'
  import zhuzhuangCharts from './zhuzhuangsanChart'
  import zhuzhuangxhChart from './zhuzhuangxhChart'
  export default {
    name: "bigData",
    components:{
      PieChart,
      chuzhangChart,
      bingzhuangChart,
      zhuzhuangChart,
      zhuzhuangChartwz,
      Screenfull,
      binhtwoChartb,
      zhuzhuangCharts,
      zhuzhuangxhChart,
      binhtwoChart
    },
    data() {
      return {
        timedata:'',//月份
        //轮播图数据
        lunboData:[],
        //第二部分数据
        bingzhuang:[],
        //第二部分不轮播
        bingzhuangding:[
          {style:''}
        ],
        bingzhuangdingWZ:[
          {style:''}
        ],
        chuzhangData: {
          benyeuArr:[24, 45, 43, 100, 76, 154, 86, 42],
          shangyueArr:[133, 50, 114, 67, 89, 20, 67, 96],
        },
        chuzhangDataWZ:{
          benyeuArr:[24, 45, 43, 100, 76, 154, 86, 42],
          shangyueArr:[133, 50, 114, 67, 89, 20, 67, 96],
        },
        //第三部分
        disanDatasan:{
          benyeuArr:[1, 1, 1, 100, 76, 154, 86, 42],
          shangyueArr:[2, 2, 2, 67, 89, 20, 67, 96],
        },
        disanDatasanwz:{
          benyeuArr:[1, 1, 1, 100, 76, 154, 86, 42],
          shangyueArr:[2, 2, 2, 67, 89, 20, 67, 96],
        },
        zxnameArrsan:[

        ],
        zxnameArrsanwz:[],
        arrright:[],
        arrrightwz:[],
        depid:'',

        //物资需求
        wzbingzhuang:[],
        timea:null,
        timeb:null,
        timec:null,
        timed:null,

      };
    },
    created() {

      var date = new Date()
      var year = date.getFullYear();
      var month = date.getMonth();
      if(month<=9){
        month = '0'+month
      }
      this.timedata=year+'-'+month
      //月份查询
      this.yuefenchaxun()

      var that = this
      //定时器
      this.timea =setInterval(function () {
        var arrTwo = that.bingzhuangding
        var objtwo = arrTwo.shift()
        arrTwo.push(objtwo)
        that.bingzhuangding = arrTwo
      },2000);

      this.timeb =setInterval(function () {
        var arrTwo = that.zxnameArrsan
        var objtwo = arrTwo.shift()
        arrTwo.push(objtwo)
        that.zxnameArrsan = arrTwo
      },2000);
      this.timec =setInterval(function () {
        var objsanxq = that.bingzhuangdingWZ.shift()
        that.bingzhuangdingWZ.push(objsanxq)
      },2000);

      this.timed =setInterval(function () {
        var objsanwz = that.zxnameArrsanwz.shift()
        that.zxnameArrsanwz.push(objsanwz)

      },2000);


    },
    mounted(){

    },
    methods: {
      // //进来
      mouseOverd:function(){
        console.log('jinlai')
        clearInterval(this.timed)
      },
      mouseLeaved:function(){
        console.log('chuqu')
        var that = this
        this.timed =setInterval(function () {
          var objsanwz = that.zxnameArrsanwz.shift()
          that.zxnameArrsanwz.push(objsanwz)
        },2000);

      },
      // //进来
      mouseOverc:function(){
        clearInterval(this.timec)
      },
      mouseLeavec:function(){
        var that = this
        this.timec =setInterval(function () {
          var objsanxq = that.bingzhuangdingWZ.shift()
          that.bingzhuangdingWZ.push(objsanxq)
        },2000);
      },
      // //进来
      mouseOverb:function(){
        clearInterval(this.timeb)
      },
      mouseLeaveb:function(){
        var that = this
        this.timeb =setInterval(function () {
          var arrTwo = that.zxnameArrsan
          var objtwo = arrTwo.shift()
          arrTwo.push(objtwo)
          that.zxnameArrsan = arrTwo
        },2000);
      },
      // //进来
      mouseOver:function(){
        clearInterval(this.timea)
      },
      mouseLeave:function(){
        var that = this
        this.timea =setInterval(function () {
          var arrTwo = that.bingzhuangding
          var objtwo = arrTwo.shift()
          arrTwo.push(objtwo)
          that.bingzhuangding = arrTwo

        },2000);
      },
      //月份查询
      yuefenchaxun:function(){
        //轮播搜索
        this.search()
        //第二部分
        this.searchtwo()
        this.searchtwoWZ()

        this.searchtwob()
        this.searchtwoWZb()

        this.searchtwoszt()
        this.searchtwosztWZ()



      },
      //第一部分测试查询
      search:function(){
        request({
          url: '/material/statistical/'+this.timedata,
          method: 'get',
        }).then(response => {
          this.lunboData = response.data

        });
      },
      //第二部分测试查询
      searchtwo:function(){
        request({
          url: '/material/statistical/two/'+this.timedata,
          method: 'get',
        }).then(response => {
          this.bingzhuang = response.data
          this.bingzhuangding = response.data

          this.searchsanszt(this.bingzhuang[0].depId)
          this.searchsan(this.bingzhuang[0].depId)
          this.searchsanyou(this.bingzhuang[0].depId)

        });
      },
      //物资
      searchtwoWZ:function(){
        request({
          url: '/material/statistical/five/'+this.timedata,
          method: 'get',
        }).then(response => {

          this.bingzhuangdingWZ = response.data
          this.searchsansztWZ(this.bingzhuangdingWZ[0].depId)
          this.searchsanwz(this.bingzhuangdingWZ[0].depId)
          this.searchsanyouwz(this.bingzhuangdingWZ[0].depId)
        });
      },
      searchtwoWZb:function(){
        request({
          url: '/material/statistical/five/'+this.timedata,
          method: 'get',
        }).then(response => {
          this.wzbingzhuang = response.data
          this.depid = this.wzbingzhuang[0].depId
          console.log('物资饼状图',this.wzbingzhuang)
        });
      },


      searchtwob:function(){
        request({
          url: '/material/statistical/two/'+this.timedata,
          method: 'get',
        }).then(response => {
          this.bingzhuang = response.data
        });
      },
      //第二部分树状图查询
      searchtwoszt:function(){
        request({
          url: '/material/statistical/twoRight/'+this.timedata,
          method: 'get',
        }).then(response => {

          this.chuzhangData = response.data
        });
      },
      searchtwosztWZ:function(){
        request({
          url: '/material/statistical/fiveRight/'+this.timedata,
          method: 'get',
        }).then(response => {

          this.chuzhangDataWZ = response.data
        });
      },

      //第三部分树状图查询
      searchsanszt:function(id){
        request({
          url: '/material/statistical/threeTeamRight/'+this.timedata +'/'+id,
          method: 'get',
        }).then(response => {

          this.disanDatasan = response.data
        });
      },
      searchsansztWZ:function(id){
        request({
          url: '/material/statistical/sixTeamCountLeft/'+this.timedata +'/'+id,
          method: 'get',
        }).then(response => {

          this.disanDatasanwz = response.data
        });
      },

      //第三部分测试查询
      searchsan:function(id){
        request({
          url: '/material/statistical/threeTeam/'+this.timedata +'/'+id,
          method: 'get',
        }).then(response => {
          this.zxnameArrsan = response.data
        });
      },
      searchsanwz:function(id){
        request({
          url: '/material/statistical/six/'+this.timedata +'/'+id,
          method: 'get',
        }).then(response => {
          this.zxnameArrsanwz = response.data
          console.log('物资',this.zxnameArrsanwz)
        });
      },

      //第三部分测试查询
      searchsanyou:function(id){
        request({
          url: '/material/statistical/threeTeamCount/'+this.timedata +'/'+id,
          method: 'get',
        }).then(response => {
          this.arrright = response.data
        });
      },
      searchsanyouwz:function(id){
        request({
          url: '/material/statistical/sixTeamCount/'+this.timedata +'/'+id,
          method: 'get',
        }).then(response => {
          this.arrrightwz = response.data
        });
      },

      jhfxBtnwz:function(item){
        this.searchsan(item)
        this.searchsanszt(item)
        this.searchsanyou(item)
        this.searchsanwz(item)
        this.searchsansztWZ(item)
        this.searchsanyouwz(item)
      },
    }
  };
</script>
<style lang="scss" >
  #review_box {
    width: 100px;
    height: 63px; /* 必须 */
    overflow: hidden;/* 必须 */
    margin: 50px auto;
    border: 1px solid red;
    text-align: center;
  }
  ul {
    list-style: none;
  }
  .bigData {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #02051f;
    padding-bottom: 50px;
    overflow: auto;
    .el-input--medium .el-input__inner{
      /*background: url("../../assets/image/inputxy.png");*/
      /*background-size: 100% 36px;*/
      color: black;
      background: #10fbf2;
      border: none;
      font-weight: 700;
    }
    .topTitle {
      height: 84px;
      width: 100%;
      background: url("../../assets/image/bjtop.png") no-repeat;
      background-size: 100% 84px;
      .yincang-yincang {
        float: left;
        color: white;
      }
      .topname {
        width: 100%;
        height: 29px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 30px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        /*color: #fefefe;*/
        padding-top:37px;
        text-align: center;
        b{
          background: linear-gradient(to right,#04fffb, #037ba7);
          -webkit-background-clip: text;
          color: transparent;
        }

      }
    }
    .lunnei {
      .el-carousel__mask {
        background-color: currentColor;
      }
      margin: auto;
      height: 263px;
      margin-top: 15px;
      width: 100%;
      .lunneidiv {
        width: 100%;
        height: 263px;
        .lunnei {
          width: 735px;
          height: 263px;
          background: url("../../assets/image/kuang.png");
          background-size: 100% 263px;
          .kuangdiv-Left {
            width: 292px;
            height: 100%;
            float: left;
            .kuang-top {
              width: 266px;
              height: 34px;
              padding-left: 34px;
              margin-top: 7px;
              font-family: MicrosoftYaHei;
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 25px;
              letter-spacing: 0px;
              color: #10fcf3;
              background: url("../../assets/image/biaotixian.png");
              background-size: 100% 34px;
            }
            .kuang-bottom {
              height: 222px;
              width: 100%;
            }
            .kuangleft {
              height: 100%;
              width: 190px;
              float: left;
            }
            .kuangright {
              height: 100%;
              width: 102px;
              float: right;
              .title {
                font-family: MicrosoftYaHei;
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #ffffff;
                text-align: center;
                margin-top: 24px;
              }
              .titleshu {
                font-family: MicrosoftYaHei-Bold;
                font-size: 18px;
                font-weight: normal;
                letter-spacing: 0px;
                color: #58e7f5;
                text-align: center;
                margin-top: 5px;
              }
            }
          }
          .kuangdiv-Right {
            width: 442px;
            height: 100%;
            float: right;
          }
        }
      }
    }
    .yuename{
      width: 1840px;
      height: 80px;
      line-height: 80px;
      margin: auto;
      text-align: center;
      color: #10fcf3;
      font-size: 25px;
    }
    .xuqiu {
      width: 1840px;
      height: 216px;
      margin: auto;
      .xuqiu-left {
        width: 283px;
        height: 216px;
        display: inline-block;
        margin-right: 8px;
        background: url("../../assets/image/huanxing.png");
        background-size: 100% 216px;
        .xuqiu-top {
          float: left;
          width: 100%;
          height: 34px;
          padding-left: 34px;
          margin-top: 7px;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 25px;
          letter-spacing: 0px;
          color: #10fcf3;
          background: url("../../assets/image/biaotixian.png");
          background-size: 100% 34px;
        }
        .xuqiu-botm {
          height: 170px;
          float: left;
          width: 100%;
          display: flex;
          .yincang {
            width: 100px;
            overflow: hidden;
          }
          .xuqiu-botm-left {
            width: 114px;
            height: 170px;
            color: white;
            padding-top: 20px;

            overflow-y: scroll;
            overflow-x: hidden;
            .chushi {
              width: 100%;
              height: 22px;
              line-height: 22px;
              padding-left: 15px;
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #2553f9;
              background-color: #0d2b5b;
              margin-bottom: 5px;
              cursor:pointer;
              border-radius: 6px;
            }
            .jinlai {
              width: 100%;
              height: 22px;
              line-height: 22px;
              padding-left: 15px;
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #ffffff;
              background-color: #329eff;
              margin-bottom: 5px;
              cursor:pointer;
              border-radius: 6px;
            }
          }
          .xuqiu-botm-right {
            width: 191px;
            height: 100%;
          }
        }
      }
      .xuqiu-centa {
        width: 913px;
        height: 216px;
        display: inline-block;
        margin-right: 8px;
        background: url("../../assets/image/zhanxian.png");
        /*background: url("../../assets/image/xuqiubj.png");*/
        background-size: 100% 216px;
        color: #FFFFFF;
        overflow: hidden;
        ul {
          list-style: none;
          height: 100%;
          width: 100%;
          margin: 0px;
          padding: 0px;
        }
        #comment1 {
          width: 100%;
          height: 57px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          color: #3ff5f3;
          /*background-color: red;*/
          .fujiys {
            width: 100%;
            height: 157px;
            /*background-color: red;*/
          }
          .comli {
            width: 100%;
            height: 57px;
            line-height: 57px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #3ff5f3;
            .zhanxian {
              width: 20%;
              display: inline-block;
              text-align: center;
            }
            .dyys {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .dyxh {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .dyye {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .yslj {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .xhlj {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
          }
          .liestyle {
            width: 100%;
            height: 33px;
            line-height: 33px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            background: url("../../assets/image/zxshujuxian.png");
            background-size: 100% 33px;
            .zhanxian {
              width: 20%;
              display: inline-block;
              text-align: center;
            }
            .dyys {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .dyxh {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .dyye {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .yslj {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .xhlj {
              width: 16%;
              display: inline-block;
              text-align: center;
            }

          }
          .liestylejg {
            width: 100%;
            height: 33px;
            line-height: 33px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            .zhanxian {
              width: 20%;
              display: inline-block;
              text-align: center;
            }
            .dyys {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .dyxh {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .dyye {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .yslj {
              width: 16%;
              display: inline-block;
              text-align: center;
            }
            .xhlj {
              width: 16%;
              display: inline-block;
              text-align: center;
            }

          }
        }
      }
      .xuqiu-cent {
        width: 913px;
        height: 216px;
        display: inline-block;
        margin-right: 8px;
        background: url("../../assets/image/zhanxian.png");
        /*background: url("../../assets/image/xuqiubj.png");*/
        background-size: 100% 216px;
        color: #FFFFFF;
        overflow: hidden;

        table {
          width: 883px;
          height: 100%;
          text-align: center;
          margin-left: 14px;
        }
        .top {
          width: 100%;
          height: 57px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #3ff5f3;
        }
        .liestyle {
          width: 100%;
          height: 33px;
          color: #FFFFFF;
          background: url("../../assets/image/zxshujuxian.png");
          background-size: 100% 33px;
        }
        .liestylejg {
          width: 100%;
          height: 33px;
          line-height: 33px;
          color: #FFFFFF;
        }
      }
      .xuqiu-right {
        width: 626px;
        height: 216px;
        display: inline-block;
        background: url("../../assets/image/zhanxian.png");
        background-size: 100% 216px;
        .xuqiu-top {
          float: left;
          width: 100%;
          height: 34px;
          padding-left: 34px;
          margin-left: 5px;
          margin-top: 7px;
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 25px;
          letter-spacing: 0px;
          color: #10fcf3;
          background: url("../../assets/image/biaotixian.png") no-repeat;
          background-size: 280px 34px;
        }
        .titlename {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 22px;
          letter-spacing: 0px;
          color: #ffffff;
          margin-right: 10px;
          margin-left: 30px;
        }
        .titlerow {
          font-family: MicrosoftYaHei-Bold;
          font-size: 18px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #10fcf3;
        }
        .xuqiu-tbom {
          float: left;
          width: 620px;
          height: 168px;
        }
      }
    }
    .bottom {
      width: 1840px;
      height: 254px;
      margin: auto;
      margin-top: 20px;
      .bottom-left {
        width: 915px;
        height: 254px;
        display: inline-block;
        margin-right: 8px;
        background: url("../../assets/image/huanxing.png");
        background-size: 100% 100%;
      }
      .bottom-zhong {
        width: 915px;
        height: 254px;
        display: inline-block;
        background: url("../../assets/image/huanxing.png");
        background-size: 100% 100%;
        overflow: hidden;
        table {
          width: 895px;
          height: 254px;
          text-align: center;
          margin-left: 10px;
        }
        .top {
          width: 100%;
          height: 57px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #3ff5f3;
        }
        .liestyle {
          width: 100%;
          height: 33px;
          color: #FFFFFF;
          background: url("../../assets/image/zxshujuxian.png") no-repeat;

          background-size: 100% 33px;
          background-position:center center
        }
        .liestylejg {
          width: 100%;
          height:33px;
          color: #FFFFFF;
        }
      }
      .bottom-right {
        width: 722px;
        height: 254px;
        display: inline-block;
        background: url("../../assets/image/huanxing.png");
        background-size: 100% 100%;
        .neirong {
          width: 100%;
          height: 100%;
          .neirong-body {
            float: left;
            width: 195px;
            height: 95px;
            margin-left: 36px;
            margin-top: 21px;
            background: url("../../assets/image/sqsl.png");
            background-size: 100% 100%;
            .neirong-sq {
              width: 100%;
              font-family: MicrosoftYaHei;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #f3f3f3;
              margin-left: 29px;
              margin-top: 14px;
            }
            .neirong-sl {
              width: 100%;
              height: 66px;
              line-height: 66px;
              text-align: center;
              font-family: MicrosoftYaHei-Bold;
              font-size: 24px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #3ff5f3;
            }
          }
        }
      }
    }

  }
</style>
